<template>
  <view class="date-audit-page">
    <view class="person-info">
	 <view class="company picker-item">
        <view class="label">姓名</view>
        <input class="picker-text" type="text" value placeholder="请填写本人真实的姓名" v-model="userName" placeholder-class="placeholder" @input="getUserName">
      </view>
      <view class="region picker-item" v-if="init.areaList.array.length>0">
        <view class="label">所在地区</view>
        <picker  class="picker-view" @change="pickerChange" data-key="areaList" :value="init.areaList.index" :range="init.areaList.array" range-key="area">
          <view
            class="picker-text"
          >{{init.areaList.array[init.areaList.index]["area"]}}</view>
        </picker>
      </view>
      <view class="company picker-item">
        <view class="label">单位名称</view>
        <input class="picker-text" type="text" value placeholder="请填写真实有效的公司名称" v-model="workCompany" placeholder-class="placeholder" @input="getCompany">
      </view>
      <view class="business picker-item">
        <view class="label">主办业务</view>
        <picker  class="picker-view" @change="pickerChange" data-key="businessType" :value="init.businessType.index" :range="init.businessType.array">
          <view class="picker-text">{{init.businessType.array[init.businessType.index]}}</view>
        </picker>
      </view>
      <view class="entry-time picker-item">
        <view class="label">入职时间</view>
        <picker class="picker-view" mode="date" data-key="date"  @change="bindDateChange" :value="date" >
          <view class="picker-text">{{date}}</view>
        </picker>
      </view>
    </view>
    <view class="upload">
      <view class="upload-item">
        <view>
			<view class="title">个人照片</view>
			<view @click="choosePersonImage">
				<image v-if="personImg==''"
				  src="../static/images/upload_personal_photos.png"
				  mode="scaleToFill"
				  lazy-load="false">
				</image>
				<image v-else
				  :src="personImg"
				  mode="scaleToFill"
				  lazy-load="false">
				</image>
			</view>
		</view>
		<view>
			<view class="title">工作证明</view>
			<view @click="chooseWorkImage">
				<image
				  v-if="workImg==''"
				  src="../static/images/upload_work_photos.png"
				  mode="scaleToFill"
				  lazy-load="false">
				</image>
				<image v-else
				  :src="workImg"
				  mode="scaleToFill"
				  lazy-load="false">
				</image>
			</view>
		</view>
      </view>
    <view class="tips">
        <view>
			1、个人照片尽量上传个人工作照，不限背景颜色，如没有工作照，请上传个人近期半身照片，照片大小不要超过2M。
		</view>
		<view>2、工作证明请上传加盖公司公章的个人在职证明。</view>
	</view>
	<view class="radio-text">
		<radio-group >
			<radio class="radio" @click="radioChange" :checked="checked"  color="#236af6"/>
		</radio-group>
		<view class="text">我已同意平台</view>
		<view class="agreement" @click="navigateUrl">《平台顾问入驻协议》</view>
	</view>
	<view class="sure-btn" @click="userAdd">确定</view>
    </view>
  </view>
</template>

<script>
import Vue from 'vue'
import InterServer from "@/common/config/server"
import {API} from "@/common/config/config"
const APP =  getApp();
export default {
	data() {
		return {
			userName:"",  //姓名
			workCompany:"",  //公司名称
			checked: false,  //是否选择
			personImg:"",  //选取个人照片
			workImg:"",  //选取工作照片
			date: "2019-01-01",
			startDate:"2019-01-01", //开始时间
			init:{
				 areaList:{
					 array:[],
					 index:0
				 },
				 businessType:{
					 array:['房产服务','车产服务','信用卡','极速服务','工资流水服务','社保服务','营业执照服务','公积金服务','自存流水服务','按揭房服务','按揭车服务','保单服务'],
					 index:0
				}
			}
    };
	},
	onLoad(){
		this.getArea();
	},
	onShow(){
		if(APP.globalData.avatar!=""){
			//this.personImg=APP.globalData.avatar
		 }
		// #ifdef H5
				document.title=`入驻资料提交`
		// #endif
	},
  methods: {
		//获取地区
 		getArea(){
			InterServer.area({

			}).then(res=>{
				if(res.code==200){
					 this.init.areaList.array=this.init.areaList.array.concat(res.data)
				}
			})
		},
		//添加、修改入驻资料
		userAdd(){
			if(this.userName==""){
 Vue.showCustomToast("请填写本人真实的姓名")
				return false
			}
			if(this.workCompany==""){
        Vue.showCustomToast("请输入单位名称")
				return false
			}
			if(this.personImg==""){
        Vue.showCustomToast("请上传个人照片")
				return false
			}
			if(this.workImg==""){
          Vue.showCustomToast("请上传单位照片")
				return false
			}
			if(!this.checked){
          Vue.showCustomToast("请同意平台顾问入驻协议")
				return false
			}
			this.upload().then((values)=> {
				console.log(values);
				let [personImage,workImage]=values
				InterServer.userAdd({
					realName:this.userName,
					city:this.init.areaList.array[this.init.areaList.index].id,
					type: this.init.businessType.array[this.init.businessType.index],
					joinTime: this.date,
					workCompany:this.workCompany,
					//uid:ue.globalData.userInfo.uid,
					personImage,
					workImage,
				}).then(res=>{
					if(res.code==200){
						Vue.customNavigateTo('./success')
					}
				})
			});
		},
		/**
     * 上传图片换取id
     */
    upload(){
		let proList = [] ;
		let imgArr=[this.personImg,this.workImg]
		imgArr.map(item=>{
				proList.push(new Promise((resolve,reject)=>{
					uni.uploadFile({
						url: API.uploadImg, 
						filePath:item,
						name: 'file',
						success: (uploadFileRes) => {
							console.log(`返回成功`)
							console.log(uploadFileRes);
							resolve('/uploads'+JSON.parse(uploadFileRes.data).data)
						}
			     	});
				}))
		});
        return Promise.all(proList)
    },
		//获取picker时间
		bindDateChange(e){
			this.date=e.detail.value;
		},
		//picker切换
		pickerChange(e){
			const key=e.currentTarget.dataset.key
			const index = e.target.value
			this.init[key].index=index
			console.log(this.init)
		},
		//获取公司名称
		getCompany(e){
			this.workCompany=e.detail.value
		},
		getUserName(){
            this.userName=e.detail.value
		},
		//选取照片
		chooseImage(callFn){
				uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera '], //album从相册选择-camera相机拍摄
				success:callFn 
			});
		},  
		//选取个人照片
		choosePersonImage(){
			this.chooseImage(res=>{
				[this.personImg]=res.tempFilePaths
				//let url=`./cropAvatar?url=dataAudit&src=${res.tempFilePaths[0]}&trigger=save`
				//Vue.customNavigateTo(url)
			})
		},
		//选取工作照片
		chooseWorkImage(){
					this.chooseImage(res=>{
				[this.workImg]=res.tempFilePaths
			})
		},
		//radio选取
		radioChange(e){
				console.log('radio发生change事件，携带value值为：', e)
				this.checked=!this.checked
		},
		 //页面跳转
     navigateUrl(e){
       Vue.customNavigateTo('./userAgreement');
     },

  }
};
</script>

<style lang="less" scope>
.date-audit-page {
  overflow: hidden;
  background: #f4f4f4;
  .placeholder {
    color: #999999;
	}	
	.picker-view{
		width:70%;
		text-align: right;
	}
  .person-info {
    margin: 20upx 0;
    background: #ffffff;
    .picker {
      &-item {
        display: flex;
        justify-content: space-between;
        height: 86upx;
        line-height: 86upx;
        margin-left: 20upx;
        padding-right: 30upx;
        border-bottom: 1upx solid #ededed;
        font-size: 30upx;
        .label {
          color: #000000;
				}
      }
		
      &-text {
        color: #236af6;
      }
    }
    input {
      height: 85upx;
      width: 500upx;
      line-height: 85upx;
      text-align: right;
    }
  }
  .upload{
	  text-align: center;
	  color: #333333;
	  font-size: 30upx;
	  background: #ffffff;
	  image{
		  width: 492upx;
		  height: 276upx;
	  }
	  .title{
		  padding: 60upx 0 40upx;
		  &:first-child{
			  padding: 48upx 0 40upx;
		  }
	  }
	  .tips{
		  font-size: 26upx;
		  color: #999999;
		  text-align: left;
		  line-height: 35upx;
		  padding: 50upx 30upx;
	  }
	  .radio-text{
		  display: flex;
		  color: #999999;
		  font-size: 26upx;
		  align-items: center;
		  padding: 30upx 30upx 90upx;
		  .text{
			  margin-left: 10upx;
		  }
		  .radio{
		  	transform:scale(0.8);
		  }

		.agreement{
				color: #236af6;
				font-weight:500;
		  }
	  }
	 .sure-btn{
		background: #236af6;
		color: #ffffff;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		font-size: 30upx;
	}
  }
}
</style>
